<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">客户管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <div class="div2">客服客户导入</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <div class="nav">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="未分配客户" name="2"></el-tab-pane>
        <el-tab-pane label="分配失败" name="3"></el-tab-pane>
        <el-tab-pane label="分配成功" name="1"></el-tab-pane>
      </el-tabs>
    </div>
    <el-collapse-transition>
      <div class="inquiry" v-show="!show3">
        <div class="header">
          <span>查询数据</span>
          <p @click="show3 = true">收起</p>
        </div>
        <el-form
          :inline="true"
          ref="form"
          :model="queryForm"
          label-width=""
          size="mini"
        >
          <el-form-item label="订单信息">
            <el-input
              placeholder="请输入客户手机号码/姓名"
              v-model="queryForm.info"
            ></el-input>
          </el-form-item>

          <el-form-item label="平台名称">
            <el-select
              v-model="queryForm.sourceFrom"
              placeholder="选择分配状态"
              clearable
              default-first-option
              filterable
            >
              <el-option
                v-for="items in channel"
                :key="items.dictId"
                v-if="items.dictId != 'comm'"
                :label="items.dictName"
                :value="items.dictId"
              ></el-option>
            </el-select>
          </el-form-item>

          <div class="selectDate">
            <span>资源时间</span>
            <div class="picker">
              <el-date-picker
                v-model="date"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy- MM- dd"
                value-format="yyyy-MM-dd"
                @input="immediUpdate"
              >
              </el-date-picker>
            </div>
          </div>

          <div class="selectDate" v-show="activeName == '1'">
            <span>分配时间</span>
            <div class="picker">
              <el-date-picker
                v-model="assigedate"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy- MM- dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
              <!-- @input="immediUpdate" -->
            </div>
          </div>

          <el-form-item>
            <el-button type="primary" @click="searchEvent()">搜索</el-button>
            <!-- v-on:keyup.enter="searchEvent" -->
            <el-button plain @click="reset" :loading="loading">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- <ul class="import">
        <li v-if="parArray.indexOf('fxg') != -1">
          <el-upload
            class="upload-demo"
            ref="upload"
            :multiple="false"
            action="#"
            :show-file-list="false"
            :http-request="safeImport"
            :auto-upload="true"
          >
            <el-button slot="trigger" size="small" type="primary"
              >导入放心购订单</el-button
            >
          </el-upload>
        </li>

        <li v-if="parArray.indexOf('baidu') != -1">
          <el-upload
            class="upload-demo"
            ref="upload"
            :multiple="false"
            action="#"
            :show-file-list="false"
            :http-request="baiduImport"
            :auto-upload="true"
          >
            <el-button slot="trigger" size="small" type="primary"
              >导入百度订单</el-button
            >
          </el-upload>
        </li>

        <li v-if="parArray.indexOf('gdt') != -1">
          <el-upload
            class="upload-demo"
            ref="upload"
            :multiple="false"
            action="#"
            :show-file-list="false"
            :http-request="broadpointImport"
            :auto-upload="true"
          >
            <el-button slot="trigger" size="small" type="primary"
              >导入广点通订单</el-button
            >
          </el-upload>
        </li>

        <li v-if="parArray.indexOf('oppo') != -1">
          <el-upload
            class="upload-demo"
            ref="upload"
            :multiple="false"
            action="#"
            :show-file-list="false"
            :http-request="opopImport"
            :auto-upload="true"
          >
            <el-button slot="trigger" size="small" type="primary"
              >导入OPPO订单</el-button
            >
          </el-upload>
        </li>

        <li v-if="parArray.indexOf('fh') != -1">
          <el-upload
            class="upload-demo"
            ref="upload"
            :multiple="false"
            action="#"
            :show-file-list="false"
            :http-request="phoneixImport"
            :auto-upload="true"
          >
            <el-button slot="trigger" size="small" type="primary"
              >导入凤凰订单</el-button
            >
          </el-upload>
        </li>

        <li v-if="parArray.indexOf('uccode') != -1">
          <el-upload
            class="upload-demo"
            ref="upload"
            :multiple="false"
            action="#"
            :show-file-list="false"
            :http-request="uCImport"
            :auto-upload="true"
          >
            <el-button slot="trigger" size="small" type="primary"
              >导入UC订单</el-button
            >
          </el-upload>
        </li>

        <li v-if="parArray.indexOf('headlinesCode') != -1">
          <el-upload
            class="upload-demo"
            ref="upload"
            :multiple="false"
            action="#"
            :show-file-list="false"
            :http-request="headlinesImport"
            :auto-upload="true"
          >
            <el-button slot="trigger" size="small" type="primary"
              >导入头条订单</el-button
            >
          </el-upload>
        </li>

        <li v-if="parArray.indexOf('aqyImport') != -1">
          <el-upload
            class="upload-demo"
            ref="upload"
            :multiple="false"
            action="#"
            :show-file-list="false"
            :http-request="headlinesAiqiyi"
            :auto-upload="true"
          >
            <el-button slot="trigger" size="small" type="primary"
              >导入爱奇艺</el-button
            >
          </el-upload>
        </li>

        <li v-if="parArray.indexOf('kwiHCode') != -1">
          <el-upload
            class="upload-demo"
            ref="upload"
            :multiple="false"
            action="#"
            :show-file-list="false"
            :http-request="kwaiFu"
            :auto-upload="true"
          >
            <el-button slot="trigger" size="small" type="primary"
              >快手</el-button
            >
          </el-upload>
        </li>
      </ul> -->
      </div>
    </el-collapse-transition>
    <div class="btn">
      <div>
        <el-select
          v-show="activeName == '2'"
          v-model="guideId"
          placeholder="导入客户"
          @change="modeGuide"
          clearable
        >
          <el-option
            v-for="item in channel"
            :key="item.dictId"
            :label="item.dictName"
            :value="item.dictId"
          ></el-option>
        </el-select>
        <p class="onekey" v-show="activeName == '2'" @click="trueDistribution">
          <img src="../../../assets/icon_liebiao.png" alt="" /><span
            >一键分配</span
          >
        </p>

        <p style="margin-left: 15px">
          <el-upload
            class="upload-demo"
            ref="upload"
            :multiple="false"
            action="#"
            :show-file-list="false"
            :http-request="automatic"
            :auto-upload="true"
          >
            <el-button slot="trigger" size="mini" type="primary"
              >自动分配</el-button
            >
          </el-upload>
        </p>

        <p style="margin-left: 15px">
          <el-upload
            class="upload-demo"
            ref="upload"
            :multiple="false"
            action="#"
            :show-file-list="false"
            :http-request="wyImport"
            :auto-upload="true"
          >
            <el-button slot="trigger" size="mini" type="primary"
              >单号导出</el-button
            >
          </el-upload>
        </p>

        <p style="margin-left: 15px">
          <el-button slot="trigger" size="mini" type="danger" @click="deleteIds"
            >批量删除</el-button
          >
        </p>
      </div>
      <el-button
        size="mini"
        type="primary"
        @click="show3 = false"
        v-show="show3"
        >搜索展开</el-button
      >
    </div>

    <div class="table">
      <vxe-table
        @checkbox-all="selectAllEvent"
        @checkbox-change="selectChangeEvent"
        ref="xGrid"
        :data="tableData.list"
        style="width: 100%"
        align="center"
      >
        <vxe-table-column type="checkbox" width="40"></vxe-table-column>
        <vxe-table-column
          type="seq"
          title="序号"
          min-width="50"
        ></vxe-table-column>
        <vxe-table-column
          field="orderNo"
          title="订单编号"
          :show-overflow-tooltip="true"
          min-width="120"
        ></vxe-table-column>

        <vxe-table-column title="客户信息" min-width="150" show-overflow>
          <template slot-scope="scope">
            <span>{{ scope.row.customerName }}</span>
            <span
              class="exisit"
              v-if="scope.row.assignErrorType == '1' && activeName == '3'"
              >已存在</span
            >

            <span
              class="exisit"
              v-if="scope.row.assignErrorType == '2' && activeName == '3'"
              >手机号相同</span
            >

            <span
              class="exisit"
              v-if="scope.row.assignErrorType == '3' && activeName == '3'"
              >分配人为空</span
            >
            <p
              style="cursor: pointer"
              @click="
                $copyText(scope.row.customerPhone).then(
                  function (e) {
                    $message({
                      type: 'success',
                      message: '成功复制手机号',
                    });
                  },
                  function (e) {
                    $message({
                      type: 'warning',
                      message: '复制失败',
                    });
                  }
                )
              "
            >
              {{ scope.row.customerPhone }}
            </p>
          </template>
        </vxe-table-column>

        <vxe-table-column title="选购商品" show-overflow min-width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.prodName }} {{ scope.row.prodItem }}</span>
          </template>
        </vxe-table-column>

        <vxe-table-column scope="scope" title="渠道" min-width="150">
          <template slot-scope="scope">
            <!-- v-if="scope.row.isAddCustomer == 'N'" -->
            <div v-if="activeName != '1'">
              <el-select
                v-model="scope.row.channelId"
                placeholder="选择渠道"
                filterable
                default-first-option
                @change="changeContent(scope.row)"
              >
                <el-option
                  v-for="items in line"
                  :key="items.id"
                  :label="items.name"
                  :value="items.id"
                ></el-option>
              </el-select>
            </div>
            <p v-else>{{ scope.row.channelName }}</p>

            <!-- 		<el-select v-model="scope.row.userDitch" placeholder="选择渠道" filterable v-if="scope.row.isAddCustomer == 'Y'">
							<el-option v-for="items in line" :key="items.id" :label="items.name" :value="items.id" disabled></el-option>
						</el-select> -->
          </template>
        </vxe-table-column>
        <vxe-table-column title="分配客服" min-width="150">
          <template slot-scope="scope">
            <div v-if="activeName != '1'">
              <el-select
                v-model="scope.row.assignorIdView"
                placeholder="选择客服"
                filterable
                default-first-option
                @change="changeContent(scope.row)"
              >
                <el-option
                  v-for="items in customer"
                  :key="items.id"
                  :label="items.reallyName"
                  :value="items.id"
                ></el-option>
              </el-select>
            </div>
            <p v-else>{{ scope.row.assignorName }}</p>
          </template>
        </vxe-table-column>
        <vxe-table-column title="资源时间" show-overflow min-width="150">
          <template slot-scope="scope">
            <p v-if="!is_null(scope.row.orderTime)">
              {{ scope.row.orderTime }}
            </p>
            <p v-else>--</p>
          </template>
        </vxe-table-column>
        <vxe-table-column
          field="sourceFromName"
          title="导入平台"
          min-width="100"
        ></vxe-table-column>

        <vxe-table-column
          title="分配时间"
          show-overflow
          min-width="150"
          v-if="activeName == '1'"
        >
          <template slot-scope="scope">
            <p v-if="!is_null(scope.row.assignTime)">
              {{ scope.row.assignTime }}
            </p>
            <p v-else>--</p>
          </template>
        </vxe-table-column>

        <vxe-table-column title="操作" min-width="240">
          <template slot-scope="scope">
            <p class="operation">
              <el-switch
                v-model="scope.row.cutOff"
                active-color="#409EFF"
                inactive-color="#eee"
              >
              </el-switch>
            </p>
            <p
              class="operation"
              @click="distribution(scope.row, scope.$index)"
              v-if="parArray.indexOf('qdfp') != -1 && activeName != '1'"
            >
              分配
            </p>

            <p
              class="operation"
              @click="tosee(scope.row)"
              v-if="parArray.indexOf('qdsee') != -1"
            >
              <!-- <img src="../../../assets/see.png" alt="" /> -->
              查看
            </p>
            <!-- </el-tooltip> -->
            <!-- <p @click='delectEvent(scope.row)'>删除</p> -->

            <p
              class="operation"
              v-if="parArray.indexOf('qdsee') != -1"
              @click="copyInfo(scope.row)"
            >
              复制
            </p>

            <p
              v-if="activeName == '1'"
              class="operation"
              @click="toDetailCustomer(scope.row)"
            >
              客户详情
            </p>

            <p
              class="operation delect"
              v-if="parArray.indexOf('delectCode') != -1 && activeName != '1'"
              @click="delectEvent(scope.row, scope.$index)"
            >
              删除
            </p>
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
    <!-- 分页end -->
    <div style="height: 40px"></div>
    <div class="page" v-if="tableData.totalNum >= 1">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.totalNum"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      :visible.sync="leadingInLive"
      :append-to-body="true"
      title="订单导入"
      @close="handleDialogClose"
    >
      <div class="popIn">
        <el-upload
          ref="tops"
          class="upload-demo"
          accept=".doc,.docx,.xls,.xlsx,.csv"
          drag
          action="#"
          :multiple="false"
          :http-request="orderImportLive"
          :limit="1"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          type="primary"
          v-if="keyvalue == 'comm'"
          @click="
            leadingInLive = false;
            templateMode();
            guideId = '';
            $refs.tops.clearFiles();
          "
          >确 定</el-button
        >

        <el-button
          size="mini"
          type="primary"
          v-if="keyvalue == 'OPPO'"
          @click="
            leadingInLive = false;
            opopImport();
            guideId = '';
            $refs.tops.clearFiles();
          "
          >确 定</el-button
        >

        <el-button
          size="mini"
          type="primary"
          v-if="keyvalue == 'BaiDu'"
          @click="
            leadingInLive = false;
            baiduImport();
            guideId = '';
            $refs.tops.clearFiles();
          "
          >确 定</el-button
        >
        <!-- 放心购 -->
        <el-button
          size="mini"
          type="primary"
          v-if="keyvalue == 'RestAssured'"
          @click="
            leadingInLive = false;
            safeImport();
            guideId = '';
            $refs.tops.clearFiles();
          "
          >确 定</el-button
        >
        <!-- 凤凰 -->
        <el-button
          size="mini"
          type="primary"
          v-if="keyvalue == 'Phoenix'"
          @click="
            leadingInLive = false;
            phoneixImport();
            guideId = '';
            $refs.tops.clearFiles();
          "
          >确 定</el-button
        >
        <!-- 广点通订单 -->
        <el-button
          size="mini"
          type="primary"
          v-if="keyvalue == 'GuangDianTong'"
          @click="
            leadingInLive = false;
            broadpointImport();
            guideId = '';
            $refs.tops.clearFiles();
          "
          >确 定</el-button
        >
        <!-- UC订单导入 -->
        <el-button
          size="mini"
          type="primary"
          v-if="keyvalue == 'uc'"
          @click="
            leadingInLive = false;
            uCImport();
            guideId = '';
            $refs.tops.clearFiles();
          "
          >确 定</el-button
        >
        <!-- 头条订单 -->
        <el-button
          size="mini"
          type="primary"
          v-if="keyvalue == 'head'"
          @click="
            leadingInLive = false;
            headlinesImport();
            guideId = '';
            $refs.tops.clearFiles();
          "
          >确 定</el-button
        >
        <!-- 爱奇艺订单 -->
        <el-button
          size="mini"
          type="primary"
          v-if="keyvalue == 'aqy'"
          @click="
            leadingInLive = false;
            headlinesAiqiyi();
            guideId = '';
            $refs.tops.clearFiles();
          "
          >确 定</el-button
        >

        <!-- 快手 -->
        <el-button
          size="mini"
          type="primary"
          v-if="keyvalue == 'ks'"
          @click="
            leadingInLive = false;
            kwaiFu();
            $refs.tops.clearFiles();
          "
          >确 定</el-button
        >
        <el-button
          size="mini"
          @click="
            leadingInLive = false;
            guideId = '';
            $refs.tops.clearFiles();
          "
          >取 消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      guideId: "",
      date: "",
      assigedate: "",
      queryForm: {
        info: "",
        sourceFrom: "",
      },
      loading: false,
      currentPage1: 1,
      pageSize: 10,
      tableData: [],
      fileList: [],
      line: [],
      customer: [],
      allocationList: [],
      limits: "",
      parArray: [],
      height: "500px",
      activeName: "2",
      leadingInLive: false,
      show3: false,
      channel: [],
      keyvalue: "",
      multipleSelection: [],
    };
  },
  created () {
    this.axiosList("1");
    this.channelAxios();
    this.customerlist();
    this.allocation();
    this.channelSource();
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === "customerImportCode"
    );
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code);
    });
    // 权限设定判断
    // let _this = this;
    // document.onkeydown = function (e) {
    //   let key = window.event.keyCode;
    //   if (key == 13) {
    //     _this.searchEvent();
    //   }
    // };
  },
  activated () {
    // this.axiosList("1");
    // this.channelAxios();
    // this.customerlist();
    // this.allocation();
  },
  methods: {
    // 多选
    selectAllEvent ({ checked, records }) {
      console.log(checked ? "所有勾选事件" : "所有取消事件", records);
      this.multipleSelection = records;
    },

    selectChangeEvent ({ checked, records }) {
      this.multipleSelection = records;
      console.log(this.multipleSelection);
    },
    // 批量删除
    deleteIds () {
      // this.axios.post("/order/v1/customer/channel/delete", ids).then((res) => {
      //   // console.log(res);
      //   if (res.code == 0) {
      //     this.$message.success("删除成功");
      //     this.axiosList();
      //   } else {
      //     this.$message.warning(res.message);
      //   }
      // });
      this.$msgbox({
        title: "提示",
        message: "确定删除这些数据吗",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then((res) => {
          if (this.multipleSelection.length == 0) {
            this.$message.error("请选择需要删除的数据");
            return;
          }
          this.axios
            .post(
              "/order/v1/customer/channel/delete",
              this.multipleSelection.map((i) => i.id)
            )
            .then((res) => {
              //   console.log(res);
              if (res.code == 0) {
                this.$message.success("删除成功");
                // let index = this.tableData.list.findIndex(
                //   (item) => item.id == row.id
                // );
                // this.tableData.list.splice(index, 1);
                this.axiosList();
              } else {
                this.$message.warning(res.message);
              }
            });
        })
        .catch(() => { });
    },
    copyInfo (row) {
      // console.log(row);
      let that = this;
      let inline = this.line.find((res) => res.id == row.channelId);
      let info =
        "姓名：" +
        row.customerName +
        "\n 电话：" +
        row.customerPhone +
        "\n 产品：" +
        row.prodName +
        row.prodItem +
        "\n,地址：" +
        row.address +
        "\n 渠道：" +
        inline.name +
        ",资源时间：" +
        /\d{4}-\d{1,2}-\d{1,2}/g.exec(row.orderTime);
      that.$copyText(info).then(
        function (e) {
          that.$message({
            type: "success",
            message: "复制成功",
          });
        },
        function (e) {
          that.$message({
            type: "warning",
            message: "复制失败",
          });
        }
      );
    },

    immediUpdate (e) {
      this.$nextTick(() => {
        if (e == null) {
          this.beginTime = "";
          this.endTime = "";
        } else {
          this.$set(this, "date", [e[0], e[1]]);
        }
      });
    },
    //监听弹框的关闭
    handleDialogClose () {
      this.guideId = "";
      this.leadingInLive = false;
    },
    // 模板数据请求 头条，爱奇艺...
    channelSource () {
      this.axios
        .get("/sys/v1/common/by/group?groupId=customer_channel_source_from", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.channel = res.data.reverse();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 模板数据请求

    //修改渠道与客服
    changeContent (row) {
      let inline = "";
      if (row.channelId) {
        inline = this.line.find((res) => res.id == row.channelId);
      }
      let name = "";
      if (row.assignorIdView) {
        name = this.customer.find((res) => res.id == row.assignorIdView);
      }

      this.axios
        .post(
          "/order/v1/customer/channel/update",
          {
            id: row.id,
            channelId: row.channelId,
            channelName: inline.name,
            assignorId: row.assignorIdView,
            assignorName: name.reallyName,
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          if (res.code == 0) {
          } else {
            this.$message.error(res.message);
          }
        });
    },
    //修改渠道与客服

    // 单号导出
    wyImport (fileObj) {
      let formData = new FormData();
      formData.append("file", fileObj.file);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        timeout: 60000,
      };
      this.axios
        .post(
          "/order/v1/customer/channel/exportAccordingToTheChannelNumber",
          formData,
          config
        )
        .then((res) => {
          if (res.code == 0) {
            this.downloadlink(res.data);
          } else {
            this.$message.error(res.message);
          }
        })
        .catch();
    },

    //一键分配
    trueDistribution () {
      this.$confirm("确定一键操作分配, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.oneDistribution();
        })
        .catch(() => { });
    },
    oneDistribution: _.debounce(function () {
      this.axios
        .get("/order/v1/customer/channel/one/key/assign", {
          timeout: 12000,
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.$alert(
              "分配成功的数量: " +
              res.data.successNumber +
              "条, " +
              "分配失败的数量: " +
              res.data.errorNumber +
              "条",
              "提示",
              {
                confirmButtonText: "确定",
              }
            );
            this.axiosList();
          } else {
            this.$message.error(res.message);
          }
        });
    }, 500),
    //一键分配
    modeGuide (e) {
      if (e) {
        this.keyvalue = e;
        this.leadingInLive = true;
        this.logFile1 = "";
      }
    },

    orderImportLive (fileObj) {
      let formData = new FormData();
      formData.append("file", fileObj.file);
      this.logFile1 = formData;
    },

    // 导入数据请求
    // 一键导入
    templateMode () {
      this.$refs.tops.clearFiles();
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        timeout: 120000,
      };
      this.axios
        .post(
          "/order/v1/customer/channel/one/key/import",
          this.logFile1,
          config
        )
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.guideId = ""; //清空模板下拉框
            this.$alert(
              "导入成功的数量: " +
              res.data.successNumber +
              "条, " +
              "导入失败的数量: " +
              res.data.errorNumber +
              "条",
              "提示",
              {
                confirmButtonText: "确定",
              }
            );
            if (res.data.errorUrl) {
              let url = this.ImgHttps + res.data.errorUrl; //创建下载链接
              let link = document.createElement("a"); //创建a标签
              link.style.display = "none"; //将a标签隐藏
              link.href = url; //给a标签添加下载链接
              link.setAttribute("download", "统一模板"); // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
              document.body.appendChild(link);
              link.click(); //执行a标签
            }
            this.axiosList();
          } else {
            this.$message.error(res.message);
          }
        })
        .catch();
    },

    reset: _.debounce(function () {
      this.loading = true;
      this.date = "";
      this.assigedate = "";
      this.queryForm = {
        info: "",
        sourceFrom: "",
      };
      this.currentPage1 = 1;
      this.pageSize = 10;
      this.axiosList("1");
    }, 300),

    searchEvent: _.debounce(function () {
      this.currentPage1 = 1;
      // this.pageSize = 10;
      this.axiosList("1");
    }, 300),

    handleClick (val) {
      this.activeName = val.name;
      this.date = "";
      this.queryForm = {
        info: "",
        sourceFrom: "",
      };
      this.currentPage1 = 1;
      this.pageSize = 10;
      this.axiosList();
    },
    toDetailCustomer (row) {
      this.$router.push({
        name: "customerInformation",
        query: {
          id: row.customerId,
        },
      });
    },

    // 自动分配
    automatic: _.debounce(function (fileObj) {
      let formData = new FormData();
      formData.append("file", fileObj.file);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        timeout: 60000,
      };
      this.axios
        .post(
          "/order/v1/customer/channel/automaticAllocation",
          formData,
          config
        )
        .then((res) => {
          //console.log(res);;
          if (res.code == 0) {
            this.$alert("导入订单 " + res.data.successNumber + " 条", {
              confirmButtonText: "确定",
            });
            this.axiosList("1");
          } else {
            this.$message.error(res.message);
          }
        })
        .catch();
    }, 300),

    //*** 放心购导入 ***//
    safeImport: _.debounce(function () {
      // let formData = new FormData();
      // formData.append("file", fileObj.file);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        timeout: 60000,
      };
      this.axios
        .post(
          "/order/v1/customer/channel/rest/assured/import",
          this.logFile1,
          config
        )
        .then((res) => {
          //console.log(res);;
          if (res.code == 0) {
            this.$alert(
              "导入放心购订单 " + res.data.successNumber + " 条",
              "放心购订单",
              {
                confirmButtonText: "确定",
              }
            );
            this.axiosList("1");
          } else {
            this.$message.error(res.message);
          }
        })
        .catch();
    }, 300),
    //*** 放心购导入 ***//
    //*** 百度导入 ***//
    baiduImport: _.debounce(function () {
      // let formData = new FormData();
      // formData.append("file", fileObj.file);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        timeout: 60000,
      };
      this.axios
        .post("/order/v1/customer/channel/baidu/import", this.logFile1, config)
        .then((res) => {
          //console.log(res);
          if (res.code == 0) {
            this.$alert(
              "导入百度订单 " + res.data.successNumber + " 条",
              "百度订单",
              {
                confirmButtonText: "确定",
              }
            );
            this.axiosList("1");
          } else {
            this.$message.error(res.message);
          }
        })
        .catch();
    }, 300),
    //*** 百度导入 ***//
    /*** 广点通导入 ***/
    broadpointImport: _.debounce(function () {
      // let formData = new FormData();
      // formData.append("file", fileObj.file);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        timeout: 60000,
      };
      this.axios
        .post(
          "/order/v1/customer/channel/guangdiantong/import",
          this.logFile1,
          config
        )
        .then((res) => {
          // //console.log(res);;
          if (res.code == 0) {
            this.$alert(
              "导入广点通订单 " + res.data.successNumber + " 条",
              "广点通订单",
              {
                confirmButtonText: "确定",
              }
            );
            this.axiosList("1");
          } else {
            this.$message.error(res.message);
          }
        })
        .catch();
    }, 300),
    /*** 广点通导入 ***/

    /**OPPO**/
    opopImport: _.debounce(function () {
      // let formData = new FormData();
      // formData.append("file", fileObj.file);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        timeout: 60000,
      };
      this.axios
        .post("/order/v1/customer/channel/oppo/import", this.logFile1, config)
        .then((res) => {
          // //console.log(res);;
          if (res.code == 0) {
            this.$alert(
              "导入OPPO订单 " + res.data.successNumber + " 条",
              "OPPO订单",
              {
                confirmButtonText: "确定",
              }
            );
            this.axiosList("1");
          } else {
            this.$message.error(res.message);
          }
        })
        .catch();
    }, 300),
    /**OPPO**/
    /**凤凰订单导入**/
    phoneixImport: _.debounce(function (fileObj) {
      // let formData = new FormData();
      // formData.append("file", fileObj.file);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        timeout: 60000,
      };
      this.axios
        .post(
          "/order/v1/customer/channel/phoenix/import",
          this.logFile1,
          config
        )
        .then((res) => {
          //console.log(res);;
          if (res.code == 0) {
            this.$alert(
              "导入凤凰订单 " + res.data.successNumber + " 条",
              "凤凰订单",
              {
                confirmButtonText: "确定",
              }
            );
            this.axiosList("1");
          } else {
            this.$message.error(res.message);
          }
        })
        .catch();
    }, 300),
    /**凤凰订单导入**/
    /**UC订单导入**/
    uCImport: _.debounce(function (fileObj) {
      // let formData = new FormData();
      // formData.append("file", fileObj.file);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        timeout: 60000,
      };
      this.axios
        .post("/order/v1/customer/channel/uc/import", this.logFile1, config)
        .then((res) => {
          //console.log(res);;
          if (res.code == 0) {
            this.$alert(
              "导入UC订单 " + res.data.successNumber + " 条",
              "UC订单",
              {
                confirmButtonText: "确定",
              }
            );
            this.axiosList("1");
          } else {
            this.$message.error(res.message);
          }
        })
        .catch();
    }, 300),
    /**UC订单导入**/
    /**头条订单导入**/
    headlinesImport: _.debounce(function (fileObj) {
      // let formData = new FormData();
      // formData.append("file", fileObj.file);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        timeout: 60000,
      };
      this.axios
        .post(
          "/order/v1/customer/channel/headline/import",
          this.logFile1,
          config
        )
        .then((res) => {
          //console.log(res);;
          if (res.code == 0) {
            this.$alert(
              "导入头条订单 " + res.data.successNumber + " 条",
              "头条订单",
              {
                confirmButtonText: "确定",
              }
            );
            this.axiosList("1");
          } else {
            this.$message.error(res.message);
          }
        })
        .catch();
    }, 300),
    /**头条订单导入**/
    /**爱奇艺导入**/
    headlinesAiqiyi: _.debounce(function (fileObj) {
      // let formData = new FormData();
      // formData.append("file", fileObj.file);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        timeout: 60000,
      };
      this.axios
        .post("/order/v1/customer/channel/aqy/import", this.logFile1, config)
        .then((res) => {
          //console.log(res);;
          if (res.code == 0) {
            this.$alert(
              "导入爱奇艺订单 " + res.data.successNumber + " 条",
              "爱奇艺订单",
              {
                confirmButtonText: "确定",
              }
            );
            this.axiosList("1");
          } else {
            this.$message.error(res.message);
          }
        })
        .catch();
    }, 300),
    /**爱奇艺导入**/

    /**快手导入**/
    kwaiFu: _.debounce(function (fileObj) {
      // let formData = new FormData();
      // formData.append("file", fileObj.file);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        timeout: 60000,
      };
      this.axios
        .post(
          "/order/v1/customer/channel/quick/worker/import",
          this.logFile1,
          config
        )
        .then((res) => {
          //console.log(res);;
          if (res.code == 0) {
            this.$alert(
              "导入快手订单 " + res.data.successNumber + " 条",
              "快手订单",
              {
                confirmButtonText: "确定",
              }
            );
            this.axiosList("1");
          } else {
            this.$message.error(res.message);
          }
        })
        .catch();
    }, 300),
    /**快手导入**/
    //*** 数据列表 ***//
    axiosList () {
      let beginTime = "";
      let endTime = "";

      if (!this.is_null(this.date)) {
        beginTime = this.date[0] + " 00:00:00";
        endTime = this.date[1] + " 23:59:59";
      }

      let assigedate_begin = "";
      let assigedate_end = "";

      if (!this.is_null(this.assigedate)) {
        assigedate_begin = this.assigedate[0] + " 00:00:00";
        assigedate_end = this.assigedate[1] + " 23:59:59";
      }

      this.axios
        .post("/order/v1/customer/channel/list", {
          request: {
            assignStatus: this.activeName, //this.queryForm.state, //1已分配 2未分配
            endTime: endTime,
            keyWord: this.queryForm.info,
            pageNo: this.currentPage1,
            pageSize: this.pageSize,
            startTime: beginTime,
            sourceFrom: this.queryForm.sourceFrom, //平台名字
            status: "A",
            assignStartTime: assigedate_begin,
            assignEndTime: assigedate_end,
          },
          version: "",
        })
        .then((res) => {
          //console.log(res);;
          let ret = /[^\u4E00-\u9FA5]/;
          this.loading = false;
          this.guideId = ""; //清空模板下拉框
          // this.$refs.tops.clearFiles();
          if (res.code == 0) {
            for (let i in res.data.list) {
              // console.log(typeof res.data.list[i].assignorIdView, res.data.list[i].assignorIdView);
              if (Number(res.data.list[i].assignorIdView)) {
                res.data.list[i].assignorIdView = Number(res.data.list[i].assignorId);
              }
            }
            this.tableData = res.data;
            console.log(this.tableData)
          } else {
            this.$message.error(res.message);
          }
        });
    },
    //*** 数据列表 ***//
    //*** 渠道&&客服数据列表 ***//
    channelAxios () {
      this.axios
        .get(
          "/order/comm/customeruser/selectCustomerditch?salesAuthorityId=2",
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.line = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 分配状态
    allocation () {
      this.axios
        .get("/sys/v1/common/by/group?groupId=assign_status", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log('分配状态')
          // //console.log(res);;
          if (res.code == 0) {
            this.allocationList = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 客户下拉框数据
    customerlist () {
      this.axios
        .get("/sys/v1/user/employee/by/sales/authority?salesAuthorityId=2", {
          headers: { isLoading: false },
        })
        .then((res) => {
          if (res.code == 0) {
            // let array=[];
            const array = res.data.filter((item) => item.salesAuthorityId === "2");
            this.customer = array;
            console.log(this.customer)
          } else {
            this.$message.error(res.message);
          }
        });
    },
    //*** 渠道&客服数据列表 ***//
    /***分配客户***/
    distribution: _.debounce(function (row) {
      if (row.assignorIdView && row.channelId) {
        this.axios
          .post(
            "/order/v1/customer/channel/assign",
            {
              request: {
                id: row.id,
                cutOff: row.cutOff ? true : false,
              },
              version: "",
            },
            {
              headers: {
                isLoading: false,
              },
            }
          )
          .then((res) => {
            if (res.code == 0) {
              if (res.data) {
                if (this.activeName == "3") {
                  this.$message.warning("分配失败");
                } else {
                  this.$message.warning("分配失败，请在分配失败列表中查看");
                }
              } else {
                this.$message.success("分配成功");
              }

              let index = this.tableData.list.findIndex(
                (item) => item.id == row.id
              );
              this.tableData.list.splice(index, 1);
            } else {
              if (this.activeName == "3") {
                this.$message.error(res.message);
              } else {
                this.$message.error(res.message + ",可在分配失败列表中查看");
              }
            }
          });
      } else {
        this.$message.warning("分配信息填写不完整");
      }
    }, 500),
    /***分配客户***/
    delectEvent: _.debounce(function (row) {
      let ids = [];
      ids.push(row.id);
      this.$msgbox({
        title: "提示",
        message: "确定删除该数据",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then((res) => {
          this.axios
            .post("/order/v1/customer/channel/delete", ids)
            .then((res) => {
              // console.log(res);
              if (res.code == 0) {
                this.$message.success("删除成功");
                let index = this.tableData.list.findIndex(
                  (item) => item.id == row.id
                );
                this.tableData.list.splice(index, 1);
                // this.axiosList();
              } else {
                this.$message.warning(res.message);
              }
            });
        })
        .catch(() => { });
    }, 300),
    is_null (content) {
      if (content) {
        return false;
      } else {
        return true;
      }
    },
    tosee (row) {
      this.$router.push({
        name: "orderView",
        query: {
          id: row.id,
          name: "guide",
        },
      });
    },
    // 分页
    handleCurrentChange (val) {
      this.currentPage1 = val;
      this.axiosList();
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.axiosList();
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

.nav {
  margin-bottom: 10px;
  /deep/.el-tabs__nav-scroll {
    background: #fff;
  }
  /deep/.el-tabs__item {
    width: 100px;
    text-align: center;
    padding: 0;
  }
}

.btn {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  > div {
    display: flex;
    justify-content: flex-start;
  }
  & ::placeholder {
    color: #fff;
    font-size: 10px;
  }

  /deep/.el-input__inner {
    width: 110px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    background: #409eff;
    color: #fff;
  }
  /deep/.el-input__icon {
    height: 30px;
    line-height: 30px;
    color: #fff;
  }
  .onekey {
    margin-left: 15px;
    width: 100px;
    text-align: center;
    height: 29px;
    line-height: 25px;
    background: #409eff;
    border-radius: 4px;
    img {
      width: 15px;
      height: 15px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }
    span {
      display: inline-block;
      vertical-align: middle;
      font-size: 12px;
      color: #fff;
    }
  }
  .onekey:hover {
    cursor: pointer;
  }
  p {
    font-size: 14px;
  }
}

/deep/.el-tabs__header {
  margin: 0;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: top;
  span {
    font-size: 15px;
    color: #000;
    padding-bottom: 10px;
  }
  p {
    color: #4168e7;
    font-size: 10px;
  }
  p:hover {
    cursor: pointer;
  }
}

.el-form {
  margin-top: 10px;
}

.inquiry {
  // min-width: 900px;
  background: #fff;
  padding: 10px 10px 0 10px;

  /deep/ .el-input--suffix .el-input__inner {
    height: 30px;
  }
}

.selectDate {
  display: inline-block;
  margin-right: 20px;

  span {
    display: inline-block;
    font-size: 15px;
    margin-right: 15px;
    vertical-align: middle;
  }

  .picker {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input__inner {
    width: 250px;
    height: 28px;
    line-height: 28px;
  }

  /deep/ .el-date-editor .el-range__icon {
    line-height: 23px;
  }

  /deep/ .el-date-editor .el-range-separator {
    line-height: 23px;
  }

  /deep/.el-date-editor .el-range__close-icon {
    line-height: 22px;
  }
}

.import {
  background: #fff;
  width: 100%;
  height: 40px;

  li {
    float: left;
    margin-right: 10px;
  }
}

.table {
  margin: 10px 0;
  // margin-bottom: 40px;

  /deep/.el-select .el-input .el-select__caret {
    color: #000;
    font-size: 14px;
    cursor: pointer;
  }

  /deep/.el-input__icon {
    height: 32px;
    line-height: 32px;
  }

  /deep/.el-input--suffix .el-input__inner {
    width: 140px;
    height: 32px;
    color: #000;
  }
  /deep/ .el-button {
    padding: 10px 13px;
  }
}

/deep/.el-table thead {
  color: #2d7edf;
  text-align: center;

  .cell {
    text-align: center;
  }
}

.operation {
  display: inline-block;
  padding: 0 6px;
  color: #2d7ddf;

  img {
    width: 20px;
    height: 20px;
  }
}
.operation:hover {
  cursor: pointer;
}
.delect {
  color: #ff5656;
}

/deep/.el-table td,
.el-table th {
  text-align: center;
}

.page {
  // margin: 10px 0;
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 1000;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  /deep/.el-input--suffix .el-input__inner {
    height: 30px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
/deep/.el-dialog__header {
  background: #409eff;
  padding: 10px 20px 10px;
  .el-dialog__title {
    color: #fff;
  }
}
/deep/.el-dialog__headerbtn {
  top: 15px;
}

/deep/.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.exisit {
  width: 44px;
  height: 18px;
  line-height: 18px;
  background: #fff4f4;
  border-radius: 3px;
  border: 1px solid #ff5656;
  text-align: center;
  font-size: 10px;
  color: #ff5656;
  margin-left: 5px;
}
</style>
